<template>
	<!-- 注册 -->

	<div class="register">
		<van-nav-bar title="欢迎注册" left-text="返回" left-arrow @click-left="onClickLeft" fixed />
		<!-- 登录 -->
		<van-form @submit="onSubmit" class="reg">

			<!-- 图片上传-start -->
			<!-- <van-image round width="3.5rem" height="3.5rem" src="https://img01.yzcdn.cn/vant/cat.jpeg"
				class="userimg" />  upload-icon="require('../../assets/img/2.jpg')" -->
			<van-uploader :after-read="afterRead" show-upload v-model="fileList" />
			<!-- 图片上传-end -->
			<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
				:rules="[{ required: true, message: '请填写用户名' }]" />
			<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' },
				{ pattern:/^\d{6}$/, message: '请输入正确内容' }
				]" />
			<div style="margin: 16px;">
				<van-button round block type="info" native-type="submit">注册</van-button>
			</div>
		</van-form>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';
	export default {
		name: 'register',
		data() {
			return {
				username: '',
				password: '',
				// 图片预览
				fileList: [{
					url: 'https://img01.yzcdn.cn/vant/cat.jpeg'
				}, ],

			};
		},
		methods: {
			onClickLeft() {
				Toast('返回');
				this.$router.back()
			},
			onSubmit(values) { //注册按钮
				var img = localStorage.getItem('img')
				var params = new URLSearchParams();
				params.append('username', values.用户名);
				params.append('password', values.密码);
				params.append('img', img);
				//	
				this.$http.post('http://test1:90/test1_php/reg.php', params).then(res => {
					Toast('注册成功');
					this.$router.push({name:'logn'});					
					
					
				}).catch(err => {});
			},
			// 图片上传-start
			afterRead(file) {
				// 此时可以自行将文件上传至服务器
				localStorage.setItem('img', base64ToString(file.content))
				this.fileList.url = file.content //把选择的图片给图片列表
			},
			// 图片上传-end
		},
	};
</script>

<style>
	.reg {
		margin-top: 22%;

	}

	.userimg {
		margin-left: 45%;
	}
</style>
